@use "@/common/styles/colors"

.server-list
  background-color: colors.$lighter-background
  height: 100%
  display: flex
  flex-direction: column
  align-items: center
  position: relative
  border-right: 2px solid colors.$dark-gray
  overflow: hidden

  &.collapsed
    width: 6px
    padding: 0
    border-right-width: 2px
    cursor: e-resize

  .server-list-inner
    display: flex
    flex-direction: column
    width: 95%
    height: 100%
    overflow: hidden
    padding-right: 1rem
    padding-left: 1rem
    container-type: inline-size

    .search-container
      margin-top: 1rem
      display: flex
      gap: 0.5rem
      align-items: flex-start
      position: relative

      .tag-filter-button
        display: flex
        align-items: center
        justify-content: center
        padding: 0.8rem
        border-radius: 0.7rem
        border: 1px solid colors.$gray
        background-color: colors.$dark-gray
        color: colors.$subtext
        cursor: pointer
        transition: all 0.2s
        position: relative
        flex-shrink: 0

        svg
          width: 1.4rem
          height: 1.4rem

        .tag-count
          position: absolute
          top: -4px
          right: -4px
          background-color: colors.$primary
          color: colors.$white
          border-radius: 50%
          width: 16px
          height: 16px
          display: flex
          align-items: center
          justify-content: center
          font-size: 9px
          font-weight: 600

        &:hover
          background-color: colors.$gray
          color: colors.$light-gray

        &.active
          background-color: colors.$primary-opacity
          border-color: colors.$primary
          color: colors.$white

    .servers
      margin-top: 1rem
      display: flex
      flex-direction: column
      gap: 0.2rem
      user-select: none
      flex: 1
      overflow-x: hidden
      overflow-y: auto

      &::-webkit-scrollbar
        width: 4px
        height: 4px

      &::-webkit-scrollbar-track
        background: transparent

      &::-webkit-scrollbar-thumb
        background: colors.$gray
        border-radius: 10px

      &::-webkit-scrollbar-thumb:hover
        background: colors.$subtext

      scrollbar-width: thin
      scrollbar-color: colors.$gray transparent

      .truncate-text
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
        max-width: 80%

    .no-servers
      display: flex
      user-select: none
      height: 100%
      flex-direction: column
      justify-content: center
      align-items: center
      color: colors.$subtext

      svg
        width: 5rem
        height: 5rem

  .resizer
    position: absolute
    right: -4px
    top: 0
    height: 100%
    width: 8px
    background-color: transparent
    cursor: col-resize
    z-index: 10

    &:hover
      background-color: colors.$primary
  .is-resizing
    background-color: colors.$primary